<template>
  <div class="jibenxinxi">
    <header>
      <div @click="goback" class="left">
        <span class="iconfont icon-xiangzuo1"></span>
      </div>
      基本信息
    </header>
    <div class="messagejiben">
      <div class="xinmin">
        <span style="margin-left: 0.3rem; margin-right: 1rem">*姓名</span
        ><input
          v-model.trim="names"
          style="width: 4rem; outline: none; border: 0"
          type="text"
          placeholder="请输入姓名"
        />
      </div>
      <div class="xinmin">
        <span style="margin-left: 0.3rem; margin-right: 1rem">*性别</span>
        <input v-model.trim="gender" name="sex" value="男" type="radio" />男
        <input v-model.trim="gender" name="sex" value="女" type="radio" />女
      </div>
      <div class="xinmin">
        <span style="margin-left: 0.3rem; margin-right: 0.8rem">*婚姻状况</span>
        <select v-model.trim="marry">
          <option>已婚</option>
          <option>未婚</option>
          <option>离异</option>
        </select>
      </div>
      <div class="block">
        <span
          class="demonstration"
          style="margin-left: 0.5rem; margin-right: 0.8rem"
          >*出生年月</span
        >
        <el-date-picker v-model.trim="birth" type="month" placeholder="选择月">
        </el-date-picker>
      </div>
      <div class="xinmin">
        <span style="margin-left: 0.3rem; margin-right: 1rem">*第一学历</span>
        <select v-model.trim="student">
          <option>本科</option>
          <option>大专</option>
          <option>中专</option>
        </select>
      </div>
      <div class="xinmin">
        <span style="margin-left: 0.3rem; margin-right: 0.7rem"
          >*是否全日制</span
        >
        <select v-model.trim="allday">
          <option>是</option>
          <option>否</option>
        </select>
      </div>
      <div class="xinmin">
        <span style="margin-left: 0.3rem; margin-right: 1rem">*政治面貌</span>
        <select v-model.trim="politicsStatus">
          <option>中共党员</option>
          <option>普通居民</option>
        </select>
      </div>
      <div class="xinmin">
        <span style="margin-left: 0.3rem; margin-right: 1rem">*是否规培</span>
        <select v-model.trim="training">
          <option>是</option>
          <option>否</option>
        </select>
      </div>
      <div class="xinmin">
        <span style="margin-left: 0.3rem; margin-right: 1rem">*执业资格</span>
        <select v-model.trim="practicing">
          <option>未有执业证书</option>
          <option>助理医师</option>
          <option>执业医师</option>
          <option>执业药师</option>
          <option>执业护士</option>
        </select>
      </div>
      <div class="xinmin">
        <span style="margin-left: 0.3rem; margin-right: 1.5rem">*职称</span>
        <select v-model.trim="support">
          <option>助理</option>
          <option>初级</option>
          <option>中级</option>
          <option>副高</option>
          <option>高级</option>
          <option>未评级</option>
        </select>
      </div>
      <div class="xinmin">
        <span style="margin-left: 0.3rem; margin-right: 1rem">*专业</span
        ><input
          v-model.trim="major"
          style="width: 4rem; outline: none; border: 0"
          type="text"
          placeholder="请输入专业"
        />
      </div>
      <div class="xinmin">
        <span style="margin-left: 0.3rem; margin-right: 1rem">*邮箱</span
        ><input
          v-model.trim="email"
          style="width: 4rem; outline: none; border: 0"
          type="text"
          placeholder="请输入邮箱"
        />
      </div>
      <div class="xinmin">
        <span style="margin-left: 0.3rem; margin-right: 1rem">*联系方式</span
        ><input
          v-model.trim="annualincome"
          style="width: 3rem; outline: none; border: 0"
          type="text"
          placeholder="请输入联系方式"
        />
      </div>
      <div class="xinmin">
        <span style="margin-left: 0.3rem; margin-right: 1rem">*民族</span
        ><input
          v-model.trim="masterpiece"
          style="width: 4rem; outline: none; border: 0"
          type="text"
          placeholder="请输入民族"
        />
      </div>
    </div>
    <div class="submit">
       <el-popover
    placement="bottom"
    title=""
    width="200"
    trigger="click"
    content="保存成功">
    <el-button @click="submit" class="button" slot="reference">保存</el-button>
  </el-popover>
    </div>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
// import DraWerVue from '../xiaozujian/DraWer.vue'
export default {
  data() {
    return {
      names: "", //姓名
      gender: "男", //性别
      marry: "", //婚姻状况
      birth: "", //出生年月
      student: "", //第一学历
      allday: "", //是否全日制
      politicsStatus: "", //政治面貌
      training:"", //是否规培
      practicing: "", //执业资格
      support:"", //职称
      major: "", //专业
      email: "", //邮箱
      annualincome: "", //联系方式
      masterpiece:"", //民族
    };
  },
  methods: {
    ...mapMutations(['setArr']),
  async  submit() {
      let nianji = 2022 - JSON.parse(JSON.stringify(this.birth)).slice(0, 4);
      let newarr = {
            names:this.names,//姓名
            gender:this.gender,//性别
            marry:this.marry,//婚姻状况
            birth:nianji,//出生年月
            student:this.student,//第一学历
            allday:this.allday,//是否全日制
            politicsStatus :this.politicsStatus,//政治面貌
            training:this.training,//是否规培
            practicing:this.practicing,//执业资格
            support:this.support,//职称
            major:this.major,//专业
            email:this.email,//邮箱
            annualincome:this.annualincome,//年收入
            masterpiece:this.masterpiece,//民族
      };
         console.log(newarr);
    let {data} =await this.$http({
      url:"http://192.168.58.87:8080/userdata/"+this.id,
      method:"patch",
      data:{
        names:newarr.names,
        gender:newarr.gender,
        marry:newarr.marry,
        birth:newarr.birth,
        student:newarr.student,
        allday:newarr.allday,
        politicsStatus:newarr.politicsStatus,
        training:newarr.training,
        practicing:newarr.practicing,
        support:newarr.support,
        major:newarr.major,
        email:newarr.email,
        annualincome:newarr.annualincome,
        masterpiece:newarr.masterpiece
      }
    })
    this.$store.commit("setArr",data)
        setTimeout(()=>{
            this.$router.push("/resume")
        },1000)
    },
    goback() {
      this.$router.go(-1);
    },
  },
  computed:{
        ...mapState(["arr","id"])
    }
};
</script>

<style scoped>
.jibenxinxi{
    width: 100%;
    padding: 1rem 0rem;
    overflow: auto;
}
.block {
  font-size: 0.2rem;
  margin-bottom: 0.2rem;
}
header {
  width: 100%;
  height: 1rem;
  background-color: #ba050e;
  position: fixed;
  z-index: 30;
  font-size: 0.36rem;
  font-weight: 700;
  color: white;
  top: 0;
  text-align: center;
  line-height: 1rem;
}
.left {
  height: 1rem;
  width: 1rem;
  line-height: 1rem;
  position: absolute;
}
.left > span {
  font-size: 0.3rem;
}
.xinmin {
  font-size: 0.25rem;
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  background-color: white;
}
.submit {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
}
.button{
  width: 3rem;
  height: 50%;
  font-size: 0.3rem;
  color: white;
  background-color: #ba050e;
  outline: none;
  border-radius: 0.3rem;
  border: 0;
}
</style>